/* ====================================== Select  ====================================== */
import React from 'react'
import { Cascader } from 'antd'
const { $fn } = window
// ===================================================================== 
class Index extends React.Component {
	state = {
		
	}
	
	_onChange = (value, option) => {
		const { name, onChanged, onChange, outer } = this.props
		value = $fn.isValid(value) ? value : ''
		
		if(!outer){ this.setState({ value }) }
		
		let model = name ? { [name]: value } : value
		
		onChanged?.({ model, value, option, name })
		onChange?.(value)
	}
	
	setValue = value => this.setState({ value })
	getValue = () => this.state.value
	
	clear = () => this.setState({ value: null })
	
	render(){
		const { data, value, p , width, size, style,isP, className, disabled, loading, bordered, isClear, loadData, changeOnSelect  } = this.props
		const _data = data || this.state.data
		const t = p ? p : ''
		const borderedValue = bordered === false ? false : true
		const _size = size || 'small'
		const _value = this.state.value === undefined ? value : this.state.value
		let height = 24
		if( size === 'middle' ){ height = 30 }
		
		return (
			<Cascader 
				options		= { _data }
				loadData	= { loadData }
				size		= { _size } 
				onChange	= { this._onChange }
				changeOnSelect = { changeOnSelect  }
				style		= {{ width, height, padding:'0 11px', ...style }} 
				value 		= { Array.isArray(_value) ? _value : [] }
				className 	= {`${className?className:'w'} ${bordered===false ? 'input-bordered':''}`}
				placeholder	= { isP ? '请选择' + t :  t  }
				disabled 	= { !$fn.hasArray(_data) || disabled }
				loading		= { loading }
				bordered	= { borderedValue }
				showSearch	= { loadData ? false : true }
				allowClear  = { isClear !== false }
				onClick		= { e => e.stopPropagation() }
			/>
		)
	}
}
export default Index